<template>
  <div class="accountForm">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="账号" prop="account" v-if="option == 'add'">
        <el-input v-model="ruleForm.username"></el-input>
      </el-form-item>
      <div v-if="option == 'edit'" style="padding:20px;font-size: large">账号：{{ruleForm.username}}</div>
      <el-form-item label="密码" prop="password">
        <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="checkPass">
        <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="账号角色" prop="roleId">
        <el-select v-model="ruleForm.role_id" placeholder="请选择活动区域">
          <el-option label="普通用户" value="1"></el-option>
          <el-option label="平台管理员" value="2"></el-option>
          <el-option label="系统管理员" value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="ruleForm.email"></el-input>
      </el-form-item>
      <el-form-item label="电话" prop="phone">
        <el-input v-model="ruleForm.phone"></el-input>
      </el-form-item>
      <el-form-item label="查看抓拍权" prop="capturePermission">
        <el-switch v-model="ruleForm.is_photo"></el-switch>
      </el-form-item>
      <el-form-item label="配置决策权" prop="configPermission">
        <el-switch v-model="ruleForm.is_configue"></el-switch>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">{{ this.comfireTitle }}</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {showMessage} from "@/utils/displayUtils";
import {sendChangeAccount} from "@/utils/userUtils";
import {mapGetters} from "vuex";

export default {
  name: "accountForm",
  props:{
    accountDetail: Object,
    option: {
      validator(value) {
        // 这个值必须与下列字符串中的其中一个相匹配
        return ['add', 'edit'].includes(value)
      }
    }
  },
  computed: {
    ...mapGetters(['loginStatus','username','password','email','roleId','uid'])
  },
  data( ){
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if (this.ruleForm.checkPass !== '') {
          this.$refs.ruleForm.validateField('checkPass');
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.ruleForm.password) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      comfireTitle: '修改',
      ruleForm: {},
      // checkPass: '',
      ruleFormSimple: {
        uid: localStorage['uid'],
        pid: '',
        username:'',
        password:'',
        checkPass: '',
        role_id: '1',
        email:'',
        phone:'',
        is_photo: false,
        is_configue: false
      },
      rules: {
        password:  [
          { required: true, validator: validatePass, trigger: 'blur' }
        ],
        checkPass: [
          { required: true, validator: validatePass2, trigger: 'blur' }
        ],
        roleId: [
          { required: true, message: '请选择用户角色！', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入邮箱地址', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
        ],
        phone: [
          { required: true, message: '请输入手机号码', trigger: 'blur' },
          { min: 11, max: 11, message: '请输入11位手机号码', trigger: 'blur' },
          {
            pattern: /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/,
            message: '请输入正确的手机号码'
          }
        ],
      },
    }
  },
  mounted() {
    if (this.option === 'add') {
      this.ruleForm = this.ruleFormSimple
      this.comfireTitle = '新增'
    } else {
      this.ruleForm = this.accountDetail
      this.comfireTitle = '修改'
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // todo 调用配置更新或新增api
          // alert('配置完成!');
          let accountOption ={
            uid:this.uid,
            pid:this.ruleForm.pid,
            password:this.ruleForm.password,
            username:this.ruleForm.username,
            email:this.ruleForm.email,
            phone:this.ruleForm.phone,
            role_id:this.ruleForm.role_id,
            is_photo:this.ruleForm.is_photo,
            is_configue:this.ruleForm.is_configue,
          }
          console.log(this.ruleForm)
          if (this.option == 'add') {
            this.ruleForm.setAttribute('uid',localStorage['uid'])
            sendChangeAccount(accountOption).then((data) => {
              if (data.code == '200') {
                showMessage(this,data.msg,'success')
                this.$emit('complete',{class: 'add', item: this.ruleForm})
              }else {
                showMessage(this,data.msg,'warning')
              }
            })
          } else {
            this.ruleForm.setAttribute('uid',localStorage['uid'])
            sendChangeAccount(this.ruleForm).then((data) => {
              if (data.code == '200') {
                showMessage(this,data.msg,'success')
                this.$emit('complete',{class: 'edit', item: this.ruleForm})
              }else {
                showMessage(this,data.msg,'warning')
              }
            })
          }
        } else {
          console.log('提交错误!!');
          showMessage(this,'提交错误！','warning')
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  }
}
</script>

<style scoped>

</style>
